<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core" >

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
	<link rel="stylesheet" type="text/css" media="screen" href="resources/style.css" />
</h:head>

<h:body>

<p:layout fullPage="true"  >  
  
	<p:layoutUnit position="north" size="70" >
		<ui:include src="cabecalho.xhtml" />
	</p:layoutUnit>

	<p:layoutUnit position="center"  >
		<h:form id="form1" >
		<p:panel header="Detalhes do Comprovante:" id="parametros" >
			<h:panelGrid columns="3">
				
				<h:outputLabel value="Arquivo:" />
				
				<p:commandLink id="downloadLink"  value="#{uploadDocumentoMB.documento.arquivo.nome}" ajax="false">  
	   				<p:fileDownload value="#{uploadDocumentoMB.file}"  />  
				</p:commandLink>
				
				<h:outputLabel value="" />

				<h:outputLabel value="Tipo de Documento:" />
		
				<p:selectOneMenu id="tipoDoc" value="#{uploadDocumentoMB.idTipoDocumento}" effect="fade" style="width: 350px" >  
		            <f:selectItem itemLabel="" itemValue="" />  
		            <f:selectItems value="#{uploadDocumentoMB.tiposDocumento}" var="tipo" itemLabel="#{tipo.nome}" itemValue="#{tipo.id}"/>  
		            <p:ajax update="param" listener="#{uploadDocumentoMB.tiposDocumentoSelected}" />
		        </p:selectOneMenu> 
		        
			    <p:commandLink actionListener="#{tipoDocumentoMB.zeraParametros}" update=":form2:tipoParam" onsuccess="dlg.show()" >  
			        <h:outputText value="Novo" />  
			    </p:commandLink>		        
			</h:panelGrid>
			        
	        <h:panelGrid columns="1" id="param" >
	        	<ui:repeat value="#{uploadDocumentoMB.documento.parametros}" var="parametro" >
	        	  	<div style="margin-bottom:2px">
	        	  
		        	<div style="width: 187px;float: left;">
		        		<h:outputLabel value="#{parametro.configuracao.nome}:" />
		        	</div>
		        	  
					<p:inputText value="#{parametro.valor}" rendered="#{parametro.configuracao.tipoParametro == 'TEXTO'}" style="width: 350px" />
					  
					<p:calendar value="#{parametro.data}" showOn="button" rendered="#{parametro.configuracao.tipoParametro == 'DATA'}" style="width: 350px" />
					  
					</div>				    
				</ui:repeat>
	        </h:panelGrid>
	        
	    	<p:commandButton value="Salvar"  actionListener="#{uploadDocumentoMB.salvar}" ajax="false" />
	    	
	    	<p:messages id="messages" />
    	</p:panel>    
		</h:form>
	</p:layoutUnit>
	    
    <p:layoutUnit position="south" size="43">
		<ui:include src="rodape.xhtml" />
    </p:layoutUnit>  
  
</p:layout>

<p:dialog id="dialog" header="Novo Tipo de Comprovante" resizable="false" draggable="false" modal="true" widgetVar="dlg">  
    <h:form id="form2">  
  
  		<div style="width: 220px;float: left;">
			<h:outputLabel value="Nome do Documento:" />
		</div>
		
		<p:inputText value="#{tipoDocumentoMB.tipoDocumento.nome}" style="width: 200px" />
  
        <h:panelGrid columns="1" id="tipoParam">
        	<ui:repeat value="#{tipoDocumentoMB.tipoDocumento.parametros}" var="parametroDoc" >
	        	<div style="margin-bottom:2px">  
		        	<div style="width: 216px;float: left;">
		        		<h:outputLabel value="Parâmetro #{parametroDoc.ordem}:" />
		        	</div>
		        	  
		        	<div style="width: 223px;float: left;">
						<p:inputText value="#{parametroDoc.nome}" style="width: 200px" />
					</div>  
					  
					<p:selectOneMenu value="#{parametroDoc.tipoParametro}" effect="fade" style="width: 100px" >  
			            <f:selectItem itemLabel="" itemValue="" />  
			            <f:selectItems value="#{tipoDocumentoMB.tiposParametro}" var="tipo" itemLabel="#{tipo.texto}" itemValue="#{tipo}"/>  
			        </p:selectOneMenu> 
				</div>
			</ui:repeat>
			
			<h:panelGrid columns="2">
				<p:commandButton value="Cadastrar" update=":form1:tipoDoc,messagesPopup" onsuccess="dlg.hide()" actionListener="#{tipoDocumentoMB.adicionarTipoDocumento}" ajax="true" />
				<p:commandButton value="+ Adicionar Parâmetro" update="tipoParam,messagesPopup" actionListener="#{tipoDocumentoMB.adicionarparametro}" ajax="true" />
			</h:panelGrid>
			
			<p:messages id="messagesPopup" /> 
			
        </h:panelGrid>
 
          
    </h:form>  
</p:dialog>                    

</h:body>
</html>